<template>
  <div class="transfer-container">

    <!-- 左侧表格 -->
    <div class="table-container">
      <h3>可选任务</h3>
      <el-table
        ref="leftTable"
        :data="availableItems"
        border
        height="calc(100% - 40px)"
        @row-click="(e)=>{showWorkInit=true;workId= e.workItemId}"
        @selection-change="(val)=>{leftSelection = val}">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="title" label="任务标题"></el-table-column>
        <el-table-column prop="type" label="任务类型">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column prop="assignee" label="负责人">
          <template slot-scope="scope">
            <user-and-avatar :user-id="scope.row.assignee"></user-and-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间"></el-table-column>
        <el-table-column prop="dueDate" label="截止时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.priority" :value="scope.row.priority"/>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 中间操作按钮 -->
    <div class="transfer-buttons">
      <el-button type="primary" icon="el-icon-arrow-right" @click="moveRight"
                 :disabled="leftSelection.length === 0"></el-button>
      <el-button type="primary" icon="el-icon-arrow-left" @click="moveLeft"
                 :disabled="rightSelection.length === 0"></el-button>
    </div>

    <!-- 右侧表格 -->
    <div class="table-container">
      <h3>已选任务</h3>
      <el-table
        ref="rightTable"
        :data="selectedItems"
        border
        height="calc(100% - 40px)"
        @row-click="(e)=>{showWorkInit=true;workId= e.workItemId}"
        @selection-change="(val)=>{rightSelection = val}">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="title" label="任务标题"></el-table-column>
        <el-table-column prop="type" label="任务类型">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column prop="assignee" label="负责人">
          <template slot-scope="scope">
            <user-and-avatar :user-id="scope.row.assignee"></user-and-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间"></el-table-column>
        <el-table-column prop="dueDate" label="截止时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.priority" :value="scope.row.priority"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="showWorkInit" title="工作项详情" width="1650px">
      <work-item v-if="showWorkInit" :work-id="workId"></work-item>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWorkByNoSprintId,
  getWorkBySprintId,
  workAddSprintByIds,
  workRemoveSprintByIds
} from "@/api/projectUser/userWork";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import WorkItem from "@/components/Project/workItem.vue";

export default {
  name: "SprintWorkList",
  components: {WorkItem, UserAndAvatar},
  dicts: ['work_status', 'actual_value', 'work_type', 'priority', 'requirement_type', 'work_risk'],
  data() {
    return {
      showWorkInit: false,
      workId: null,
      availableItems: [],
      selectedItems: [],
      leftSelection: [],
      rightSelection: []
    };
  },
  props: {
    sprintId: {
      type: Number,
    },
    projectId: {
      type: Number,
    }
  },
  created() {
    this.getWorkList()
  },
  methods: {
    getWorkList() {
      getWorkBySprintId(this.sprintId).then(res => {
        this.selectedItems = res.data
      })
      getWorkByNoSprintId(this.projectId).then(res => {
        this.availableItems = res.data
      })
    },
    moveRight() {
      workAddSprintByIds(this.sprintId, this.leftSelection.map(item => item.workItemId)).then(res => {
        this.getWorkList()
      })
    },
    moveLeft() {
      workRemoveSprintByIds(this.sprintId, this.rightSelection.map(item => item.workItemId)).then(res => {
        this.getWorkList()
      })

    }
  }
};
</script>

<style scoped lang="scss">
.transfer-container {
  display: flex;
  width: 100%;
  height: 700px;
}

.table-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  background: #fff;
  padding: 10px;
  overflow: hidden;
}

.table-container h3 {
  text-align: center;
  font-size: 16px;
  margin: 0 0 10px;
}

.transfer-buttons {
  display: flex; /* 确保是 Flex 布局 */
  flex-direction: row; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  width: 100px; /* 按钮容器宽度 */
  min-width: 80px; /* 防止变形 */
  height: 100%; /* 填充父级 div */
}

.transfer-buttons .el-button {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  display: flex; /* 让按钮内容变为 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding: 0; /* 避免默认 padding 影响 */
  font-size: 18px; /* 让图标大小适中 */
}
</style>
